<template>
  <!-- 群详情 -->
  <div class="dialogue-info">
    <header id="wx-header">
      <!--<div class="other"><span>添加朋友</span></div>-->
      <div class="center">
        <div class="iconfont icon-return-arrow" v-on:click="$router.back()">
          <span></span>
        </div>
        <span>聊天信息({{ groupInfo.member_number }})</span>
      </div>
    </header>
    <div class="member">
      <ul class="chat-dialogue-entry-collect">
        <li v-for="(item, index) in groupInfo.getUserList" :key="index" 
        @click="gotoUserInfo(item.uid)">
          <div><img :src="item.getClientUid.headimg" /></div>
          <p class="member-name"><van-badge dot v-if="item.getClientUid.online" /><span class="ellipsis">{{ item.remark || item.getClientUid.nickname }}</span></p>
        </li>

        <!-- 增加 -->
        <li>
          <div>
            <span
              class="iconfont icon-chat-detail-add"
              @click="
                $router.push({
                  path: '/wechat/dialogue/dialogue-info/add',
                  query: { groupId: groupInfo.id },
                })
              "
            ></span>
          </div>
        </li>
        <!-- 减少 只有群管理员才能操作删除 -->
        <li v-if="groupInfo.admin_uid == $store.state.uid">
          <div class="iconfont">
            <van-icon
              name="minus"
              @click="
                $router.push({
                  path: '/wechat/dialogue/dialogue-info/add',
                  query: { groupId: groupInfo.id, del: 1 },
                })
              "
            />
          </div>
        </li>
      </ul>
    </div>
    <div class="weui-cells">
      <div class="weui-cell weui-cell_access">
        <div class="weui-cell__bd">群聊名称</div>
        <div class="weui-cell__ft" @click="showNickname = true">{{ groupInfo.name }}</div>
      </div>
      <!-- <div class="weui-cell weui-cell_access">
                <div class="weui-cell__bd">群二维码</div>
                <div class="weui-cell__ft"><img class="_align-middle" style="height:24px"
                        src="../../assets/images/chat-info-qr.png"></div>
            </div> -->
      <!-- <div class="weui-cell weui-cell_access">
                <div class="weui-cell__bd">群公告</div>
                <div class="weui-cell__ft">未设置</div>
            </div> -->
    </div>
    <div class="weui-cells">
      <div class="weui-cell weui-cell_switch">
        <div class="weui-cell__bd">消息免打扰</div>
        <div class="weui-cell__ft">
          <input
            type="checkbox"
            class="weui-switch"
            v-model="msgInfo.quiet"
            @change="setUp('is_top')"
          />
        </div>
      </div>
      <div class="weui-cell weui-cell_switch">
        <div class="weui-cell__bd">置顶聊天</div>
        <div class="weui-cell__ft">
          <input
            type="checkbox"
            class="weui-switch"
            v-model="msgInfo.is_top"
            @change="setUp('is_top')"
          />
        </div>
      </div>
      <!-- <div class="weui-cell weui-cell_switch">
                <div class="weui-cell__bd">保存到通讯录</div>
                <div class="weui-cell__ft"><input type="checkbox" class="weui-switch"></div>
            </div> -->
    </div>
    <!-- <div class="weui-cells">
            <div class="weui-cell weui-cell_access">
                <div class="weui-cell__bd">我在本群的昵称</div>
                <div class="weui-cell__ft"></div>
            </div>
            <div class="weui-cell weui-cell_switch">
                <div class="weui-cell__bd">显示成员昵称</div>
                <div class="weui-cell__ft"><input type="checkbox" class="weui-switch" v-model="showNickname"></div>
            </div>
        </div> -->
    <!-- <div class="weui-cells">
            <div class="weui-cell weui-cell_access">
                <div class="weui-cell__bd">聊天文件</div>
                <div class="weui-cell__ft"></div>
            </div>
            <div class="weui-cell weui-cell_access">
                <div class="weui-cell__bd">查找聊天内容</div>
                <div class="weui-cell__ft"></div>
            </div>
            <div class="weui-cell weui-cell_access">
                <div class="weui-cell__bd">设置当前聊天背景</div>
                <div class="weui-cell__ft"></div>
            </div>
            <div class="weui-cell weui-cell_access">
                <div class="weui-cell__bd">投诉</div>
                <div class="weui-cell__ft"></div>
            </div>
        </div> -->
    <!-- <div class="weui-cells">
      <div class="weui-cell">
        <div class="weui-cell__bd">清空聊天记录</div>
        <div class="weui-cell__ft"></div>
      </div>
    </div> -->
    <span
      class="weui-btn weui-btn_warn"
      style="margin-top: 15px; padding: 0 20px; width: 90%"
      @click="logoutGroup"
      >删除并退出</span
    >

    <!-- 修改 -->
    <upInfo :text="groupInfo.name" 
    title="修改群名称" 
    desc="修改群聊名称后，将会再群内通知其他成员" 
    v-if="showNickname" @onSubmit="UpGroupName"></upInfo>

  </div>
</template>
<script>
import { ApiGetGroupInfo, ApiLogoutGroup, ApiSetUp } from "@/api/api/message";
import { ApiSetUserGroupName } from "@/api/api/UserGroup";
import { Icon } from "vant";
import upInfo from '@/components/common/up-info.vue'
import { Badge } from 'vant';
export default {
  components: {
    [Badge.name]: Badge,
    [Icon.name]: Icon,
    upInfo,
  },
  data() {
    return {
      showNickname: false,
      mid: 0,
      groupInfo: [], // 群组用户列表
    };
  },
  mounted() {
    this.mid = this.$route.query.mid;
    this.init();
  },

  activated() {},
  computed: {
    // 从会话列表中直接获取数据  这里面有 是否消息免打扰
    msgInfo() {
      for (let i in this.$store.state.msgList.baseMsg) {
        let item = this.$store.state.msgList.baseMsg[i];
        if (item.mid == this.mid) {
          return item;
        }
      }
      return {
        quiet: false,
      };
    },
  },
  methods: {
    init() {
      //获取群组信息
      ApiGetGroupInfo({ mid: this.mid }).then(({ data, msg }) => {
        this.groupInfo = data;
        //数据存入vuex中
        this.$store.commit("setGroupInfo", {
          groupId: this.mid,
          groupInfo: data,
        });
      });
    },
    //修改群聊名称
    UpGroupName(text){
        this.showNickname = false;
        if(text!=' ' && text != this.groupInfo.name){
            //执行修改操作
            this.groupInfo.name = text
            let params = {
                groupId:this.groupInfo.id,
                name:text
            }
            ApiSetUserGroupName(params).then()
        }
    },
    //前往查看用户信息
    gotoUserInfo(mid){
      let groupName = this.groupInfo.name
        if(this.$store.state.uid != mid){
            //查看别人
            this.$router.push({path:'/contact/details',query:{wxid:mid,groupName:groupName}})
        }else{
            //查看自己
            this.$router.push({path:'/self'})
        }
    },
    //个人退出群组
    logoutGroup() {
        let params = {
            groupId:this.mid
        }
        //发起退群操作
        ApiLogoutGroup(params).then(({data,msg})=>{
            //上一个页面是群聊  应该返回会话列表
            this.$router.push({path:'/'})
            this.$store.commit('delMsgList',this.mid)
        })
    },
    setUp(field) {
      let params = {
        field,
        value: this.msgInfo[field] ? 1 : 0,
        mid: this.mid,
      };
      ApiSetUp(params).then(({ data, msg }) => {
        console.log(msg);
      });
    },
  },
};
</script>
<style  lang="less">
.dialogue-info {
  min-height: 100%;
  bottom: inherit;
  padding-bottom: 30px;
}

.chat-dialogue-entry-collect {
  background-color: #fff;
  position: relative;
  padding: 15px 10px 5px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  color: #464646;
  font-size: 14px;
}

.chat-dialogue-entry-collect:before {
  content: "";
  position: absolute;
  width: 200%;
  left: 0;
  bottom: 0;
  transform: scale(0.5);
  transform-origin: 0 0;
  -webkit-transform: scale(0.5);
  -webkit-transform-origin: 0 0;
  background-color: #b7b7b7;
  height: 1px;
  z-index: 2;
}

.chat-dialogue-entry-collect li {
  float: left;
  flex-grow: 1;
  flex-basis: 20%;
  max-width: 20%;
  padding: 5px 10px;
  text-align: center;
}

.chat-dialogue-entry-collect li > div {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  width: 55px;
  height: 55px;
  margin: 0 auto;
  background-size: cover;
  border: 1px solid #eee;
}

.chat-dialogue-entry-collect li > div img {
  width: 100%;
}

.chat-dialogue-entry-collect li p {
  margin-top: 5px;
}

.chat-dialogue-entry-collect li .iconfont {
  font-size: 23px;
  color: #bbb;
  line-height: 55px;
}
.member-name{
  display: flex;
  justify-content: center;
  align-items: center;
  
  .van-badge--dot{
    background-color: green;
  }
}


</style>